<template>
    <div>
        <Modal width="800"
               v-model="modal.addModel"
               @on-ok="ok"
               @on-cancel="cancel"
               draggable
               scrollable
               :loading="loading"
               title="课程类型添加">
            <Row type="flex" justify="center">
                <Col class="courseTypeForm" span="17">
                    <Form :label-width="90">
                        <FormItem label="类型选择">
                            <RadioGroup v-model="radio" >
                                <Radio label="1">一级类型</Radio>
                                <Radio label="2">二级类型</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="类型名称">
                            <Input v-model="courseType.courseTypeName"/>
                        </FormItem>
                        <FormItem v-if="radio==2" label="隶属类型">
                            <Select v-model="courseType.parentId">
                                <Option v-for="index in parentList" :key="index.courseTypeId" :value="index.courseTypeId">{{index.courseTypeName}}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                radio:"1",
                parentList: [],
                courseType: {
                    courseTypeName: null,
                    parentId: null,
                },
                loading:true

            }
        },
        props: {
            modal: {
                addModel: false
            }
        },
        methods: {
            ok() {
                //当前页为二级类型时需要做判断
                if (this.courseType.courseTypeName==""||this.courseType.courseTypeName==null){
                    this.isInputNull("请输入正确的名称");
                    return;
                }
                if (!this.courseType.parentId&&this.radio=='2'){
                    this.isInputNull("请选择隶属类型");
                    return;
                }
                if (this.radio=='1'){
                    this.courseType.parentId = '0';
                }

                this.http.post("/courseType/addCourseType",this.qs.stringify(this.courseType)).then(res=>{
                    this.getParent();
                    this.$Message.success("保存成功");
                }).finally(final=>{
                    this.$emit("addstatus", true);
                })
            },
            cancel() {
                this.$emit("addstatus", false)
            },
            isInputNull(text){
                this.$Message.warning(text);
                setTimeout(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    })
                }, 500);
            },
            getParent(){
                this.http.get("/courseType/getParentAndChildren").then(res => {
                    if (res.data) {
                        this.parentList = res.data.parentList;
                    }
                })
            }
        },
        watch:{
            /**
             *利用'modal.addModal'变量值为true的情况下在里面进行初始化，防止父组件加载时候子组件也同时加载
             * @param val
             */
            'modal.addModel'(val){
                if(val){
                    this.getParent();
                }
            }
        }
    }
</script>

<style scoped>
    .pic {
        width: 150px;
        height: 150px;
        border: 1px solid;
        border-radius: 75px;
    }

    /*.courseTypeForm {*/
    /*    border-left: 1px solid;*/
    /*    padding-left: 10px;*/
    /*}*/
</style>
